<!--#
layout("/layouts/platform.html"){
#-->
<div id="app" v-cloak>
    <!--<div class="head">
        <div class="headone"><i class="el-icon-menu"></i><span>移交管理</span></div>
    </div>-->
    <el-row class="header navbar bg-white">

        <div class="btn-group tool-button" style="line-height: 50px;">
            统计类型：
            <el-select v-trim v-model="pageForm.type" placeholder="统计类型" size="mini" style="width:180px;" clearable>
                <el-option label="编制任务量统计" value="nextsprIds"> </el-option>
                <el-option label="检验任务量统计" value="jyryIds"> </el-option>
            </el-select>
            日期范围：
            <el-date-picker type="date" placeholder="开始日期" v-trim v-model="pageForm.startDate" size="mini" value-format="yyyy-MM-dd" style="width: 180px;"></el-date-picker>
            至<el-date-picker type="date" placeholder="结束日期" v-trim v-model="pageForm.endDate" size="mini" value-format="yyyy-MM-dd" style="width: 180px;"></el-date-picker>
            <el-button slot="append" icon="el-icon-search" size="mini" @click="doSearch" circle></el-button>
        </div>
    </el-row>
    <el-row class="el-table-container">
        <el-table ref="ElTableHeaderRef" :data="tableData" @sort-change='pageOrder'  height="520" border size="small" header-align="center" style="width: 100%" >
            <el-table-column sortable="custom"  prop="name"  label="部门"  header-align="center" align="center"show-overflow-tooltip></el-table-column>
            <el-table-column  sortable="custom" prop="username" label="人员"  header-align="center" align="center"show-overflow-tooltip></el-table-column>
            <el-table-column  sortable="custom" prop="numsum" label="任务量" header-align="center" align="center"show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-button @click="getList(scope.row.id)" size="mini">{{scope.row.numsum}}</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <el-dialog :close-on-click-modal="false" title="样品列表" :visible.sync="dialogVisible" width="80%">
        <el-row class="navbar bg-white">
            <div class="btn-group tool-button" style="line-height: 50px;">
                <el-input placeholder="样品编号或名称" v-trim v-model="pageForm.searchKeyword"  size="mini" style="width:180px;"></el-input>
                <el-button slot="append" icon="el-icon-search" size="mini" @click="doYpSearch" circle></el-button>
            </div>
        </el-row>
        <el-row>
            <el-table :data="ypTableData" @sort-change='yppageOrder' height="300"  border size="small" header-align="center"  style="width: 100%" >
                <el-table-column fixed="left" prop="userOnline" label="操作" width="120" header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-button @click="detail(scope.row.id)" size="mini">详情</el-button>
                    </template>
                </el-table-column>
                <el-table-column fixed="left" prop="lczt" label="检验状态" width="100px;" header-align="center"  show-overflow-tooltip>
                    <template slot-scope="scope" ><span :class="'statusCss-'+scope.row.lczt"><i :class="'el-icon-'+scope.row.lczt"/>{{getDict(scope.row.lczt,allMap.lcztMap)}}</span></template>
                </el-table-column>
                <el-table-column fixed="left" sortable="custom" prop="ypbh" label="样品编号" width="150px;" header-align="center" show-overflow-tooltip></el-table-column>
                <el-table-column fixed="left"sortable  prop="ypmc" label="产品名称" width="150px;" header-align="center" show-overflow-tooltip></el-table-column>
                <el-table-column sortable="custom" prop="jylx" label="检验类别" width="100px;" header-align="center" align="center" show-overflow-tooltip>
                    <template slot-scope="scope" >{{getDict(scope.row.jylx,allMap.jylxMap)}}</template>
                </el-table-column>
                <el-table-column sortable="custom" prop="jyks" label="检验部门" width="200px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="wtdw" label="委托单位" width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="ggxh" label="规格型号" width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="scrqpc" label="原编号/生产日期" width="120px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="sb" label="商标" width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            </el-table>
        </el-row>
        <el-row class="el-pagination-container">
            <el-pagination @size-change="pageSizeChange" @current-change="pageNumberChange" :current-page="pageForm.pageNumber" :page-sizes="[10, 20, 30, 50]"
                           :page-size="pageForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageForm.totalCount">
            </el-pagination>
        </el-row>
        <span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">关 闭</el-button></span>
    </el-dialog>
    <el-drawer :wrapperClosable="false" title="样品详情" :visible.sync="drawer" direction="rtl" size="80%" @opened="openIframe" destroy-on-close>
        <iframe id="iframeDetail" src="" width="100%" height="100%" frameborder="0" marginheight="0"></iframe>
    </el-drawer>
</div>
<script>
    new Vue({
        el: "#app",
        data: function () {
            var allMap = {
                jylxMap:${jylxMap},
                lcztMap:${lcztMap}
            };
            return {
                allMap: allMap,
                tableData: [],
                tableDataCount:"",
                pageForm: {type: "nextsprIds",startDate:"${startDate}",endDate:"${endDate}"},
                drawer: false,
                dialogVisible:false,
                ypTableData:[],
                deltailURL:""
            }
        },
        methods: {
            handleClick(tab, event) {
                this.pageForm.pageSize = 0;
                this.ypPageData();
            },
            yppageOrder: function (column) {//按字段排序
                this.pageForm.yppageOrderName = column.prop;
                this.pageForm.yppageOrderBy = column.order;
                this.ypPageData();
            },
            pageNumberChange: function (val) {//页码更新操作
                this.pageForm.pageNumber = val;
                this.ypPageData();
            },
            pageSizeChange: function (val) {//分页大小更新操作
                this.pageForm.pageSize = val;
                this.ypPageData();
            },
            doYpSearch: function () {
                this.pageForm.pageNumber = 1;
                this.ypPageData();
            },
            ypPageData: function () {//加载分页数据
                var self = this;
                sublime.showLoadingbar();//显示loading
                $.post(base + "/platform/bus/reports/task/jbxxData", self.pageForm, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code == 0) {
                        self.ypTableData = data.data.list;
                        self.pageForm.totalCount = data.data.totalCount;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            pageOrder: function (column) {//按字段排序
                this.pageForm.pageOrderName = column.prop;
                this.pageForm.pageOrderBy = column.order;
                this.pageData();
            },
            pageData: function () {//加载分页数据
                var self = this;
                sublime.showLoadingbar();//显示loading
                $.post(base + "/platform/bus/reports/task/data", self.pageForm, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code == 0) {
                        self.tableData = data.data;
                        // ElTableHeaderRef是 el-table 标签里添加的 ref="ElTableHeaderRef"
                        self.$nextTick(() => {
                            if (self.$refs.ElTableHeaderRef && self.$refs.ElTableHeaderRef.doLayout) {
                                self.$refs.ElTableHeaderRef.doLayout();
                            };
                        });
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            doSearch: function () {
                this.pageData();
            },
            getList(userid){
                var self = this;
                self.pageForm.userid=userid;
                this.$set(this.pageForm, "searchKeyword", "")
                self.dialogVisible = true;
                self.doYpSearch();
            },
            detail(id){
                this.drawer=true;
                this.deltailURL="/platform/bus/ypxx/jbxx/detail/"+id;
            },
            openIframe:function(){
                $("#iframeDetail").attr("src",this.deltailURL);
            },
            getDict: function (val, map) {
                val = val + "";
                if (val != null && val != undefined && val != "" && map != null && map != undefined) {
                    var str = val.split(",");
                    var strname = "";
                    for (var a = 0; a < str.length; a++) {
                        strname += map[str[a]];
                        if (strname == null) {
                            alert(1)
                        }
                        if (a < (str.length - 1)) {
                            strname += "/";
                        }
                    }
                    return strname;
                }
                return "";
            },
            arraySpanMethod({ row, column, rowIndex, columnIndex }) {
                if (rowIndex % 2 === 0) {
                    if (columnIndex === 0) {
                        return [1, 2];
                    } else if (columnIndex === 1) {
                        return [0, 0];
                    }
                }
            },

            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 0 ) {
                    var i = 0;
                    for(var index of this.tableData){
                        if(index.unitid == row.unitid && !index.rowFlag ){
                            i++;
                            index.rowFlag = true
                        }
                    }
                    if(i>0){
                        return {
                            rowspan: i,
                            colspan: 1
                        };
                    }else{
                        return {
                            rowspan: 0,
                            colspan: 0
                        };
                    }
                }
            }
        },
        created: function () {
            this.doSearch();
        }
    });

    function nONull(val) {
        if (val != null && val != undefined && val != "") {
            return true;
        } else {
            return false;
        }
    }
</script>
<!--#
}
#-->
